<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
</head>
<body>

	<div id="app-2">
		
	  <simple-counter></simple-counter>
	  <simple-counter></simple-counter>
	  <simple-counter></simple-counter>
	</div>
		
	<div id="app-3">
	  <input v-model="parentMsg">
	  <br>
	  <child v-bind:my-message="parentMsg"></child>
	</div>

	<div id="counter-event-example">
	  <p>{{ total }}</p>
	  <button-counter v-on:increment="incrementTotal"></button-counter>
	  <button-counter v-on:increment="incrementTotal"></button-counter>

	
	</div>
<script type="text/javascript">
	Vue.component('button-counter', {
	  template: '<button v-on:click="incrementCounter">{{counter}}</button>',
	  data: function() {
	    return { counter: 0}
	  },
	  methods: {
	    incrementCounter: function(){
 	  	this.counter += 1
		this.$emit('increment') 

	   }
	  }
	})	
	new Vue({
	    el: '#counter-event-example',
	    data: {
		total: 0
	    },
	    methods: {
		incrementTotal: function() {
		  this.total += 1
	  	}
	    }
	})


	var app3 = new Vue({
	  el: '#app-3',
	  data: {
 	   parentMsg: '',
	 
	  }
	})
		

	var data = {counter: 0}
	Vue.component('simple-counter', {
	  template: '<button v-on:click="counter += 1 "> {{ counter }} </button>',
	  data: function(){
		return data
	  }
	})

 	new Vue({
	  el: '#app-2'
	})

	

</script>
</body>

</html>
